<template>
  <div class="m-order-detail">
    <!-- 订单流程 -->
    <div class="process clearfix" v-if="noProcess">
      <!-- 取消（0）下不展示流程，待付款（10）只有拼单中才展示流程，退款（21,22,25）不展示流程，已付款（20）但是拼单失败不展示流程 -->
      <div class="item-proce f-l" v-for="(item, index) in proces" :key="index">
        <div class="f-l">
          <div class="fontTitle">{{item.text}}</div>
            <!--未评价状态之前通用样式  -->
            <div v-if="index != 4">
              <div :class="[item.procesed ? 'bg-c1' : 'bg-c2','order-img']"></div>
            </div>

            <!--评价状态通用样式  -->
            <!-- <div v-else>
              <div :class="[item.procesed ? 'bg-c3' : 'bg-c4','order-img']"></div>
            </div> -->

        </div>
      </div>
    </div>

    <!-- 买家信息 -->
    <div class="order-buyer-info clearfix">
      <w-mange-title title="买家信息"></w-mange-title>
      <!-- 左边 -->
      <div class="buyer-info fl">
        <div>
          <span class="buyer-title">收货人地址：{{orderInfo.address}}</span>
        </div>
        <div class="buyer-title">买家留言：{{orderInfo.msg}}</div>
        <div v-if="orderInfo.userName">
          <span class="buyer-title">买家：{{orderInfo.userName}}</span>
        </div>
        <div>
          <span class="buyer-title">收货人手机号：{{orderInfo.receiver_mobile}}</span>
        </div>
      </div>
      <!-- 右边 -->
      <div class="order-info">
        <div class="order-status">
          <div class="clearfix">
            <div class="icon-status fl">
              <img src="../../assets/dingdanzhuantai.png" alt="">
            </div>
            <div class="order-del">
              <h2 style="margin-bottom: 10px;">
                <span v-if="orderInfo.order_status == '30' ">订单状态: 已付款</span>
                <span v-if="orderInfo.order_status == '40' ">订单状态: 待收货</span> 
                <!-- <span v-else> 订单状态: 确认收货</span> -->
              </h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 0">订单状态：订单已取消</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 10">订单状态：等待买家付款</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 13">订单状态：供应链确定贷款成功</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 16">订单状态：货到付款</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 20 || orderInfo.refundStatus == 2">订单状态：买家已付款，等待发货</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 21 || orderInfo.refundStatus == 0">订单状态：退款待审核</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 22 || orderInfo.refundStatus == 1">订单状态：退款审核中</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 25 || orderInfo.refundStatus == 3">订单状态：退款成功</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 21">订单状态：申请退款</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 22">订单状态：退款中</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 23">订单状态：农商行部分退款</h2>
              <!-- <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 30">订单状态：{{ orderInfo.consignor == 2 ? '平台已发货' : '商家已发货'}}</h2> -->
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 35">订单状态：自提点已经收货</h2>
              <!-- <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 40">订单状态：买家已收货</h2> -->
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 41">订单状态：申请退货</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 42">订单状态：退货审核中</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 45">订单状态：退货完毕</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 46">订单状态：退款及退货退款</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 50">订单状态：买家已评价</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.order_status == 60">订单状态：订单不可评价，到达设定时间，系统自动关闭订单相互评价功能</h2>
              <span style="font-weight: bold">订单编号：{{orderInfo.tid}}</span>
              <div style="font-weight: bold" 
                v-if="orderInfo.orderStatus == 21 || orderInfo.orderStatus == 22 || orderInfo.orderStatus == 23 || orderInfo.orderStatus == 25">退款金额：
                <span class="c-main">￥{{orderInfo.totalPrice | currency}}</span>
              </div>
              <div v-if="orderInfo.orderStatus >= 30">
                <div v-if="orderInfo.orderStatus == 30 && timer">· 买家还有
                  <span style="color: #D0021B">
                    <w-count-down :start="orderInfo.nowDate" :target="orderInfo.receiverTime" @on-timer="onConfirmTimer"></w-count-down>
                  </span>
                  ：未确认收货超时订单自动确认收货
                </div>
                <div>
                  · 物流：{{orderInfo.express}}运单号：{{orderInfo.express_no}}
                  <span class="express" @click="onLookExpressInfo">查看物流信息</span>
                </div>
                <div>物流：线下物流</div>
                <span>{{orderInfo.shipTime}}</span>
                <!-- <span style="color: #D86F07">{{orderInfo.consignor == 2 ? '平台发货' : '卖家发货'}}</span> -->
              </div>
            </div>
          </div>

          <!-- 你可以进行的操作 -->
          <div class="buyer-options" v-if="orderInfo.express_no">
            你可以:
            <div class="btns-group">
              <w-button-group>
                <w-button type="option" class="dev-look" @on-click="lookDevPanel = true">查看物流详情</w-button>
              </w-button-group>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- 退款信息 -->
    <div class="refund-info after-b" v-if="orderInfo.orderStatus == 21 || orderInfo.orderStatus == 22 || orderInfo.orderStatus == 23 || orderInfo.orderStatus == 24">
      <w-mange-title title="退款信息"></w-mange-title>
      <div class="refund-del">
        <span>退款原因：{{orderInfo.userApplyReason}}</span>
        <div class="refund-cause">
          <span>退款说明：{{orderInfo.userApplyExplain}}</span>
        </div>
        <div style="margin-top: 8px;">
          <span style="vertical-align: top;">图片：</span>
          <div class="refund-imgs">
            <ul v-if="orderInfo.userApplyImg && orderInfo.userApplyImg.length">
              <li v-for="(img, imgIndex) in orderInfo.userApplyImg" :key="imgIndex">
                <a :href="img" target="_blank">
                  <img v-lazy="img" alt="">
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 卖家信息 -->
    <div>
      <w-mange-title title="卖家信息"></w-mange-title>
      <div class="store-info">
        <div>
          <span>店铺名称：{{orderInfo.shop_name}}</span>
        </div>
        <!-- <div>
          <span>商家机构号：{{orderInfo.institutionNum}}</span>
        </div>
        <div>
          <span>商家手机号：{{orderInfo.storeTelephone}}</span>
        </div> -->
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="orders">
      <div class="tab-bg">
        <w-table :columns="columns"></w-table>
      </div>
      <div class="order-lists">
        <table v-for="(goods, index) in goodsInfo" :key="index">
          <tr v-for="(gsp, gspIndex) in goods.goodsGsp" :key="gspIndex">
            <td style="width: 40%">
              <div class="goods-info clearfix">
                <div class="goods-img fl">
                  <img v-lazy="goods.goods_mainphoto_path" alt="">
                </div>
                <div class="goods">
                  <p class="p-line-hide">{{goods.goods_name}} {{goods.goodsSerial}}</p>
                  <div class="sku">
                    <span>{{gsp.goodsSpecContent.substring(0, 1) == '[' ? gsp.goodsSpecContent.substring(1, gsp.goodsSpecContent.length -1) : gsp.goodsSpecContent}} </span>
                  </div>
                </div>
              </div>
            </td>
            <td style="width: 20%">¥{{gsp.goodsSinglePrice}}</td>
            <td style="width: 20%">{{gsp.count}}</td>
            <td style="width: 20%" :rowspan="gspLen" v-if="gspIndex == 0 && goods.reviseGoodsPrice != ''">{{(gsp.goodsSinglePrice - goods.reviseGoodsPrice)*goods.goodsTotalcount || 0 | currency}}</td>
            <td style="width: 20%" :rowspan="gspLen" v-if="gspIndex == 0 && goods.reviseGoodsPrice == ''">0</td>
          </tr>
        </table>
      </div>

      <!-- 订单结算 -->
      <div class="order-amount clearfix">
        <div class="fr">
          <div class="goods-all fl ">
            <span>商品总价： ¥{{orderInfo.pro_totalfee | currency}}</span>
            <br>
            <span>店铺优惠： ¥{{orderInfo.subtrahendPrice || 0 | currency}}</span>
            <br>
            <span>运费： ¥{{orderInfo.real_income_freight | currency}}</span>
          </div>
          <div class="order-all fr">
            <p>订单总价： ¥{{orderInfo.order_totalfee | currency}}</p>
            <p>应收款：<span style="color: #C6000E">¥{{orderInfo.order_totalfee | currency}}</span></p>
          </div>
        </div>
      </div>
    </div>

    <!-- 查看物流弹出框 -->
    <w-panel-fixed-wrap :panel-title="lookDevPanel" :show-close="lookDevPanel" title="物流详情" v-model="lookDevPanel" :width="`800px`" :height="`520px`" :show-btns="false">
      <div class="dev-info">
        <div class="dev-title">
          <span style="margin: 0 100px 0 30px;">时间</span>
          <span>地点和跟踪进度</span>
        </div>

        <!-- 物流详细信息 -->
        <div class="logistics" v-if="expressInfo && expressInfo.length">
          <!-- 时间分组 -->
          <div class="time-group" v-for="(item, index) in expressInfo" :key="index">
            <div class="time-number fl">
              <span class="date">{{item.time}}</span>
              <div class="date-week">
                <span class="time">02:07</span>
                <!-- <span class="week">星期四</span> -->
              </div>
            </div>
            <div class="logistics-info">
              <p>{{item.status}}</p>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="logistics" v-else>
          <p>暂无物流信息</p>
        </div>
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { apiOrderMange } from 'js/api'

export default {
  data() {
    return {
      columns: [
        {title: '货品', width: '40%'},
        {title: '单价', width: '20%'},
        {title: '数量', width: '20%'},
        {title: '优惠', width: '20%'}
      ],
      lookDevPanel: false, // 查看物流弹出框
      orderInfo: {},
      goodsInfo: [],
      gspLen: 0, // 每个商品的sku数量
      disabledDev: true, // 禁止输入
      extendTime: '',
      expressInfo: {}, // 物流详情
      status: 1, // 审核状态
      message: '', // 提醒
      timer: true, // 倒计时
      consignor: '',
      payWay: '' // 付款方式
    }
  },
  computed: {
    ...mapGetters(['token']),
    /**
     * 根据页面来源，显示进度流程
     */
    proces() {
      return [
        {
          text: '拍下商品',
          time: '',
          procesed: true
        },
        {
          text: '已付款',
          time: '',
          procesed: false
        },
        {
          text: '已发货',
          time: '',
          procesed: false
        },
        {
          text: '确认收货',
          time: '',
          procesed: false
        }
        // {
        //   text: '评价',
        //   time: '',
        //   procesed: false
        // }
      ]
    },
    /**
     * 计算流程图width
     */
    width() {
      return `${100 / this.proces.length}%`
    },
    /**
     * 显隐当前的订单流程
     */
    noProcess() {
      if (this.orderInfo.order_status == 0 || this.orderInfo.order_status == 21 || this.orderInfo.order_status == 22 ||this.orderInfo.order_status == 23 || this.orderInfo.order_status == 25) {
        return false
      }
      return true
    }
  },
  created() {
    // this.addBreads([{name: '订单详情'}])
    this.fetchOrderInfo()
  },
  methods: {
    ...mapActions(['addBreads']),
    /**
     * 查看订单来源，查看物流详情
     */
    onLookExpressInfo() {
      this.lookDevPanel = true
      this.fetchExpressInfo()
    },
    /**
     * 获取订单详情
     */
    fetchOrderInfo() {
      if (!this.$route.params.orderid) return
      apiOrderMange.apieSynchronizedDetails(this.$route.params.orderid).then(data => {
        this.orderInfo = data.data || {}
        this.goodsInfo = JSON.parse(this.orderInfo.goodsInfo || '[]') // 获取商品信息
        this.getOrderInfo(this.orderInfo.order_status)
        if (this.orderInfo.express_no) {
          this.fetchExpressInfo()
        }
        this.payWay = this.orderInfo.paymentMark // 付款方式
      })
    },
    /**
     * 获取物流详情
     */
    fetchExpressInfo() {
      if (this.orderInfo.order_status < 30) return
      apiOrderMange.apiOrderExpress(this.orderInfo.express_no, this.$route.params.orderid).then(data => {
        if (!data.data.info) return
        this.expressInfo = JSON.parse(data.data.info || '[]')
      })
    },
    // 获取订单的状态，时间
    getOrderInfo(orderStatus) {
      orderStatus = Number(orderStatus)
      if (orderStatus == 10) {
        this.proces[0].time = this.orderInfo.addTime
      } else if (orderStatus == 30) {
        this.procesedTrue(1)
      } else if (orderStatus == 40) {
        this.procesedTrue(2)
      } else {
        this.procesedTrue(3)
      }
    },
    // 循环显示状态是否已完成
    procesedTrue(index) {
      this.proces.forEach((item, i) => {
        item.procesed = false
        item.time = ''
        if (i <= index) {
          item.procesed = true
        }
      })
      this.procesTime()
    },
    // 订单流程中，每个订单状态的时间
    procesTime() {
      const status = this.orderInfo.orderStatus
      this.proces[0].time = this.orderInfo.addTime // 拍下时间
      if (!this.orderInfo.payTime || status < 20) return
      this.proces[1].time = this.orderInfo.payTime // 付款时间
      if (!this.orderInfo.shipTime || status < 30) return
      this.proces[2].time = this.orderInfo.shipTime // 发货时间
      if (!this.orderInfo.confirmTime || status < 40) return
      this.proces[3].time = this.orderInfo.confirmTime // 收货时间
      if (!this.orderInfo.evaluateTime || status < 50) return
      this.proces[4].time = this.orderInfo.evaluateTime // 评价时间
      this.ship = this.proces[2].time
    },
    /**
     * 倒计时结束，自动确认收货，更该订单状态为已收货，待评价
     */
    onConfirmTimer() {
      this.timer = false
    }
  }
}
</script>

<style lang="scss">
.m-order-detail {
  .p-order-list {
    .w-input .error-tip {
      width: 100%
    }
  }
  .g-panel-fixed {
    .btn {
      width: 140px !important;
    }
  }
  .m-confirm-delivery {
    .w-input .error-tip {
      left: 0
    }
  }
}
</style>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.express {
  cursor: pointer;
  color: #2D8EFE;
}
.radio-consignor {
  display: inline-block;
  margin: 0 auto;
  width: 150px;
}
.m-change-gsp {
  .goods-info {
    width: 100%;
    padding: 10px;
    background:rgba(242,242,242,1);
    .img {
      width:60px;
      height:60px;
      margin-right: 10px;
    }
    .info {
      position: relative;
      width: 400px;
      height: 60px;
      display: inline-block;
      .goods-c {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        span {
          padding-right: 2%
        }
      }
    }
  }
  .sku-list {
    margin-top: 20px;
    .gsp {
      margin: 16px 0 16px 50px;
      .title {
        display: inline-block;
        vertical-align: top;
      }
      .sku {
        display: inline-block;
        width: 84%;
        white-space: pre-wrap;
        .span {
          padding: 4px 10px;
          border: 1px solid;
          border-radius: 8px;
          margin: 0 8px 8px 4px;
          display: inline-block;
          color: $color-disabled;
        }
      }
      .disabled {
        cursor: not-allowed;
      }
    }
  }
}
// 物流
.dev-info {
  .dev-title {
    border-bottom: 1px solid $border-gray-light;
    padding-bottom: 8px;
    span {
      font-weight: 600;
    }
  }
  // 物流时间轴
  .logistics {
    padding: 15px 0 20px 0;
    .time-group {
      margin-bottom: 14px;
      position: relative;
      &:first-child {
        &::before {
          background-image: url(../../assets/logistics-now.png);
        }
        .date-week {
          color: #FF6C00 !important;
        }
      }
      &:last-child {
        margin-bottom: 0;
        &::after {
          background-color: transparent;
        }
      }
      .time-number {
        width: 120px;
        text-align: center;
        padding: 0px 0px 12px 0px;
        
        .date {
          font-size: 12px;
          color: #9B9B9B;
          margin-bottom: 8px;
        }
        .date-week {
          color: #333333;
          font-size: 14px;
        }
        .week {
          margin-left: 8px;
        }

      }
      .logistics-info {
        position: relative;
        display: inline-block;
        margin: 8px 0 20px 50px;
        max-width: 550px;
      }

      &:after {
        content: "";
        display: block;
        position: absolute;
        height: calc(100% - 0px);
        width: 2px;
        top: 28px;
        left: 138px;
        background-color: #DDDDDD;
      }

      &:before {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        position: absolute;
        top: 10px;
        left: 130px;
        right: 20px;
        z-index: 10;
        background-image: url(../../assets/logistics-over.png);
        background-repeat: no-repeat;
      }
      .clear {
        clear: both;
        overflow: hidden;
      }
    }
  }
} 

.o {
  margin-right: 40px;
  margin-bottom: 20px;
  display: inline-block;
  .title {
    width: 56px;
    text-align: right;
    display: inline-block;
    margin-right: 10px;
    font-size: 12px
  }
  .dis-block {
    display: inline-block;
  }
  .o-select {
    width: 170px;
    height: 28px;
  }
}
.order-lists {
  border: 1px solid $border-gray-light;
  margin-top: 10px;
  margin-bottom: 20px;
  table {
    width: 100%;
    margin: 10px 0 10px 10px;
    td {
      text-align: center;
    }
  }
}
.t-under {
  text-decoration: underline;
  margin-right: 18px;
  font-size: 12px;
  cursor: pointer;
}
.btn-t {
  color: rgba(74,144,226,1);
}
// 订单流程
.process {
  width: 900px;
  position: relative;
  margin: 20px auto;
  .item-proce{
    text-align: center;
    background-color: $color-white;
  }
  .bg-c1{
    background-image: url('../../assets/order.png');
    background-repeat: no-repeat;
  }
  .bg-c2{
    background-image: url('../../assets/icon-greyEval.png');
    background-repeat: no-repeat;
  }
  // 未评价图片
  .bg-c3{
    background-image: url('../../assets/icon_lightprocess.png');
    background-repeat: no-repeat;
  }
  // 已评价
  .bg-c4{
    background-image: url('../../assets/icon-eval.png');
    background-repeat: no-repeat;
  }
  .order-img {
    width: 180px;
    height: 41px;
    margin: 8px 0 20px;
  }
  .f-l{
    float: left;
    .fontTitle {
      color: $color-dark;
    }
    .fontTime {
      font-size: 12px;
      color: $color-gray;
    }
  }
}
.order-buyer-info {
  margin: 20px auto 16px;
  border: 1px solid $border-gray-light;
  border-left: none;
  border-right: none;
  padding-bottom: 20px;
}
.btns-group {
  display: inline-block;
}
.buyer-info {
  width: 320px;
  padding: 0 15px;
  & > div {
    line-height: 22px;
    font-size: 12px;
    color: $color-dark;
  }
}
.buyer-title {
  vertical-align: text-top;
}
.order-info {
  width: 860px;
  margin: auto;
  display: inline-block;
  border-left: 1px solid $border-gray-light;
  .icon-status {
    display: inline-block;
    margin-right: 18px;
  }
  .order-del {
    margin-left: 8%;
    & > span {
      line-height: 22px;
    }
  }
  .order-status {
    // width: 70%;
    margin-left: 10%;
    // margin: 0 auto;
  }
}
.buyer-options {
  margin: 10px auto;
  .free-look {
    width: 120px;
  }
  .dev-look {
    width: 100px;
    margin-right: 16px;
  }
}
.buyer-options-other {
  .t-under {
    font-size: 14px !important
  }
}
.store-info {
  padding-left: 15px;
  font-size: 12px;
  & > div {
    display: inline-block;
    margin-right: 100px;
    margin-bottom: 4px;
  }
}
.after-b {
  &:after {
    content: '';
    padding-bottom: 4px;
    width: 1190px;
    position: absolute;
    border-bottom: 1px solid $border-gray-light
  }
}
.orders {
  margin-top: 18px;
}
.tab-bg {
  background-color: #f0f0f0;
  padding-left: 10px;
  table {
    border: none
  }
}
.goods-info {
  .goods-img {
    width: 88px;
    height: 88px;
    margin-right: 14px;
  }
  .goods {
    position: relative;
    text-align: left;
    height: 88px;
    font-size: 12px;
    p {
      font-weight: 500;
    }
    .sku {
      color: $color-dark;
    }
  }
  .update-sku {
    position: absolute;
    bottom: 0;
  }
}
.order-amount {
  border: 1px solid $border-gray-light;
  padding: 18px;
  margin-bottom: 20px;
  .goods-all {
    border-right: 1px solid $border-gray-light;
    padding-right: 48px;
    span {
      line-height: 22px;
      font-size: 12px;
    }
  }
  .order-all {
    font-size: 16px;
    padding-left: 48px;
    p {
      text-align: right;
      line-height: 34px;
    }
  }
}

.p-order-list {
  margin-top: 12px;
  table {
    width: 100%;
    tr {
      border: 1px solid $border-gray-light;
      td {
        height: 114px;
        text-align: center;
        &:nth-child(1) {
          width: 38%;
          padding: 10px;
        }
        &:nth-child(2) {
          width: 14%
        }
        &:nth-child(3) {
          width: 16%
        }
        &:nth-child(4) {
          width: 16%
        }
        &:nth-child(5) {
          width: 16%
        }
      }
    }
  }
  .goods-name {
    text-align: left;
  }
  .input-count {
    width: 72px;
    margin: 0 auto
  }
}
.m-price {
  margin-top: 20px;
  font-size: 12px;
  color: #222222;
  .price {
    width: 80px;
    display: inline-block;
  }
  .change {
    padding: 0 20px 0 10px;
  }
}
.refund-info {
  .refund-del {
    span {
      font-size: 12px;
    }
    .refund-imgs {
      display: inline-block;
    }
    .refund-cause {
      margin-left: 60px;
      display: inline-block;
    }
    ul {
      li {
        width: 46px;
        height: 46px;
        margin-right: 10px;
        display: inline-block;
      }
    }
  }
}
.tip-panel {
  width: 100%;
}
// 发货弹框
.m-confirm-delivery {
  text-align: center;
  .delivery {
    margin-bottom: 20px;
  }
  .title {
    width: 80px;
    display: inline-block;
    text-align: right;
  }
  .info {
    width: 300px;
    margin-left: 10px;
    display: inline-block;
  }
}
// 退款审核
.review-refund {
  margin-left: 30px;
  & > div {
    margin-bottom: 10px;
  }
  .refund-title {
    width: 80px;
    text-align: right;
    display: inline-block;
    vertical-align: top;
  }
  .refund-input {
    display: inline-block;
    width: 280px;
    textarea {
      background-color: transparent
    }
  }
}
</style>
